<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--  
        1. 单次计时
            setTimeout(功能, 时间)
            意思: 多少时间之后, 执行一次功能, 例如: 延迟


        2. 多次计时
            setInterval(功能, 时间)
            意思: 每隔多少时间, 就执行一次功能, 例如: 定时
            
            注意: 
             * 时间单位: 毫秒         1s = 1000ms
             * 功能指的是: 匿名函数 or 函数名 (不加小括号的函数名)
        
        3. 计时器ID
            每个计时器都会返回一个 计时器id

            注意: 
             * setTimeout 和 setInterval 计时器ID计数 是共享(并非单独计数)
        
        4. 清除计时器
            通过 计时器id 来清除指定的计时器
            clearTimeout(计时器id)
            clearInterval(计时器id)
    -->
    <script>
        // 单次计时
        // setTimeout(function(){
        //     console.log('2s之后我们下楼去啃一个大鸡腿');            
        // }, 2000 )

        // function demo(){
        //     console.log('2s之后我们出门去打个飞机');
        // }
        // setTimeout(demo, 2000);


        // 多次计时
        // var time = 10;
        // setInterval(function(){

        //     if( time >= 0){
        //         document.write(time);
        //         time--;
        //     }else{
        //         return;
        //     }
        // }, 100);
        // console.log('------------- 分隔符 --------------');
    </script>

    <script>
        // var x = setTimeout(function(){
        //     console.log('1s 时间到了');
        //     // return 100;
        // }, 1000);
        // console.log(x);

        // var time = 0;
        // var x = setInterval(function(){
        //     time++;
        //     document.write(time);
        // }, 1000);
        // console.log(x);
    </script>   


    <button onclick=" stop() ">暂停</button>
    <script>
        // var time = 0;
        // var x = setInterval(function(){
        //     console.log(time, x);
        //     time++;
        // }, 1000);

        // function stop(){
        //     clearInterval(x);
        //     console.log(x);
        // }


        // var x = setTimeout(function(){
        //     console.log('1s 时间到了 ');
        //     clearTimeout(x);
        // },1000);
        // console.log(x);


        // 如何利用 setTimeout 实现 setInterval
        // var time = 0;
        // function demo(){
        //     time++;
        //     console.log(time);

        //     x = setTimeout(demo, 1000);

        //     if(time == 5){
        //         clearTimeout(x);
        //     }
        // }

        // var x = setTimeout(demo, 1000);
    </script>
    

    <!--  
        练习: 暂停/开始计时
    -->
    <div id="box"></div>
    <button onclick="stop()">暂停</button>
    <button onclick="again()">继续</button>
    <script>
        // 显示时间
        var box = document.getElementById('box');
        var time = 0;
        var flag = true; // true    可以暂停
                          // flase   可以继续
        box.innerHTML = time; // 显示初始值

        var timer = setInterval(function(){
            time++;
            box.innerHTML = time;
        }, 1000);

        // 暂停
        function stop(){
            if(flag == true){
                clearInterval(timer);
                flag = false;
            }
        }

        // 继续
        function again(){
            if(flag == false){
                flag = true;
                timer = setInterval(function(){
                    time++;
                    box.innerHTML = time;
                }, 1000);
            }
        }
    </script>


    <!--  
        练习: 显示当前时间
    -->
    <div id="box2"></div>
    <script>
        function showTime(){
            // var time = new Date(2000,12,13,10,9,8);
            var time = new Date();

            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var i = time.getMinutes();
            var s = time.getSeconds();
            var w = time.getDay();

            m = m < 10 ? '0'+m : m;
            d = d < 10 ? '0'+d : d;
            h = h < 10 ? '0'+h : h;
            i = i < 10 ? '0'+i : i;
            s = s < 10 ? '0'+s : s;

            var week;
            switch(w){
                case 0: week = '星期天'; break;
                case 1: week = '星期一'; break;
                case 2: week = '星期二'; break;
                case 3: week = '星期三'; break;
                case 4: week = '星期四'; break;
                case 5: week = '星期五'; break;
                case 6: week = '星期六'; break;
            }
            var box2 = document.getElementById('box2');
            box2.innerHTML = `${y}/${m}/${d} ${h}:${i}:${s} ${week}`;
        }

        setInterval(showTime, 1000);
    </script>

</body>
</html>